<template>
   <div>
      <input type="file" @change="uploadImageHandle">
      <div>{{tipMsg}}</div>
      <div>
        <img :src="avatar" class="avatar">
      </div>
   </div>
</template>
<script>
 import axios from 'axios'
 export default{
    data(){
        return{
            avatar:'https://bpic.51yuansu.com/pic3/cover/01/69/80/595f67be8b8f7_610.jpg',
            tipMsg:''
        }
    },
    methods:{
        async uploadImageHandle(e){
            const {name,type,size}=e.target.files[0]
            const sizeM=126805/(1024*1024)
            if(type=="image/jpeg"||type=="image/png"){
                if(sizeM>2){
                    this.tipMsg="上传的图片不能超过2M"
                }else{
                    /**
                     * axios进行文件上传
                     * 上传文件必须要使用POST请求，具体参数说明
                     * 参数1：上传文件的地址
                     * 参数2：formData对象
                     * 参数3：axios的配置对象，如果要进行文件上传需要在配置
                     * Content-Type的值为multipart/form-data
                     */
                    //创建formData
                    let fd=new FormData()
                    fd.append("avatar",e.target.files[0])
                    const {data:{code,message,avatarPath}}=await axios.post("http://www.zhaijizhe.cn:3005/upload/uploadImage",fd,{
                        'Content-Type':'multipart/form-data'
                    })
                    console.log('-----',code,avatarPath);
                    if(code==200){
                        this.tipMsg=message
                        this.avatar=`http://www.zhaijizhe.cn:3005${avatarPath}`
                    }
                }
            }else{
                this.tipMsg="上传的文件不是图片"
            }        
        }
    }
 }
</script>

<style lang="scss" scoped>
    .avatar{
        margin: 30px 10px;
        width: 150px;
    }
</style>